Code Breakers | No-code solutions

🖥 Фича Bubble, о которой вы наверняка не знали

Вы наверняка не знаете об этой классной функции в Bubble: возможности воспроизводить изображения в формате Masonry Grid — сетки, в которой изображения выстраиваются в неровном шахматном порядке. Формат такой сетки встречается в Pinterest. Рассказываем, как сделать такую самому!

Как сделать Masonry Grid: начало настройки

1️⃣ Заранее подготовьте изображения и убедитесь в их качестве: некоторые будут вытягиваться вертикально, так что и разрешение, и сама картинка должны быть к этому готовы.
2️⃣ Получить Masonry Grid можно только внутри элемента Repeating Group, в которой потоком воспроизводятся изображения из базы данных. Так что создайте Repeating Group и задайте источником данных для неё изображения.
3️⃣ Перейдите в настройки Repeating Group через редактор свойств — серое окошко с настройками элемента. Там надо найти чек-бокс Set fixed number of rows и снять галочку.
4️⃣ После этого появится чек-бокс Stretch rows to fill vertical space — растянуть строки и заполнить вертикальное пространство. Эту галочку тоже надо снять.

✅ После двух этих манипуляций появится новая настройка, которая раньше не была видна — Display items as masonry grid.

Как сделать Masonry Grid: работа с изображениями

Сетка-масонри включена. Теперь можно настроить отображение изображений, чтобы всё смотрелось красиво и аккуратно.

1️⃣ Здесь же, во вкладке Appearance, в настройке Repeating Group можно задать расстояние между изображениями, чтобы они не прилипали друг к другу.
2️⃣ Теперь надо кликнуть на сам элемент изображения в ячейке Repeating Group. Найдите настройку Run-mode rendering. Поменяйте настройку с Zoom на настройку Rescale и тогда изображение отобразится согласно своим истинным пропорциям.
3️⃣ Идём во вкладку Layout. Там надо найти настройку Make this element fixed-height. Снимите галочку. Теперь изображения будут отображаться так, как положено в Masonry Grid.

✅ Masonry Grid готова!

Ещё пара лайфхаков:
➕ Можно настроить отображение Masonry Grid по колонкам, задав внутри Repeating Group фиксированное количество колонок, например, 3 штуки. Тогда изображения будут выстраиваться сверху вниз в три колонки.
➕ Если снять настройку на фиксированное количество колонок, станет доступна настройка ширины каждой колонки, и тогда изображение будет занимать эту ширину.

➖➖➖➖➖➖➖➖➖➖➖➖

В классическом программировании для создания Masonry Grid используется HTML, CSS и, чтобы всё заработало, — JavaScript. Довольно трудоёмкая задачка сделать всё это рабочим — и результат, к слову, может сказаться на производительности.

А в Bubble такая крутая фича реализуется в несколько кликов и за пару минут работы!

Хотите знать все доступные фишки лучших No-code инструментов и научиться создавать топовые IT-продукты на Bubble? Тогда ждём на курсе «Веб-разработчик без кода», стартуем 25 октября!

🖥 Хочу освоить Bubble: codebreakers.tech/bubble

www.tg-me.com/sg/Code Breakers | No code solutions/com.code_breakers/643

1.9K viewsedited  Oct 18, 2023 at 08:00

🖥 Фича Bubble, о которой вы наверняка не знали

Вы наверняка не знаете об этой классной функции в Bubble: возможности воспроизводить изображения в формате Masonry Grid — сетки, в которой изображения выстраиваются в неровном шахматном порядке. Формат такой сетки встречается в Pinterest. Рассказываем, как сделать такую самому!

Как сделать Masonry Grid: начало настройки

1️⃣ Заранее подготовьте изображения и убедитесь в их качестве: некоторые будут вытягиваться вертикально, так что и разрешение, и сама картинка должны быть к этому готовы.
2️⃣ Получить Masonry Grid можно только внутри элемента Repeating Group, в которой потоком воспроизводятся изображения из базы данных. Так что создайте Repeating Group и задайте источником данных для неё изображения.
3️⃣ Перейдите в настройки Repeating Group через редактор свойств — серое окошко с настройками элемента. Там надо найти чек-бокс Set fixed number of rows и снять галочку.
4️⃣ После этого появится чек-бокс Stretch rows to fill vertical space — растянуть строки и заполнить вертикальное пространство. Эту галочку тоже надо снять.

✅ После двух этих манипуляций появится новая настройка, которая раньше не была видна — Display items as masonry grid.

Как сделать Masonry Grid: работа с изображениями

Сетка-масонри включена. Теперь можно настроить отображение изображений, чтобы всё смотрелось красиво и аккуратно.

1️⃣ Здесь же, во вкладке Appearance, в настройке Repeating Group можно задать расстояние между изображениями, чтобы они не прилипали друг к другу.
2️⃣ Теперь надо кликнуть на сам элемент изображения в ячейке Repeating Group. Найдите настройку Run-mode rendering. Поменяйте настройку с Zoom на настройку Rescale и тогда изображение отобразится согласно своим истинным пропорциям.
3️⃣ Идём во вкладку Layout. Там надо найти настройку Make this element fixed-height. Снимите галочку. Теперь изображения будут отображаться так, как положено в Masonry Grid.

✅ Masonry Grid готова!

Ещё пара лайфхаков:
➕ Можно настроить отображение Masonry Grid по колонкам, задав внутри Repeating Group фиксированное количество колонок, например, 3 штуки. Тогда изображения будут выстраиваться сверху вниз в три колонки.
➕ Если снять настройку на фиксированное количество колонок, станет доступна настройка ширины каждой колонки, и тогда изображение будет занимать эту ширину.

➖➖➖➖➖➖➖➖➖➖➖➖

В классическом программировании для создания Masonry Grid используется HTML, CSS и, чтобы всё заработало, — JavaScript. Довольно трудоёмкая задачка сделать всё это рабочим — и результат, к слову, может сказаться на производительности.

А в Bubble такая крутая фича реализуется в несколько кликов и за пару минут работы!

Хотите знать все доступные фишки лучших No-code инструментов и научиться создавать топовые IT-продукты на Bubble? Тогда ждём на курсе «Веб-разработчик без кода», стартуем 25 октября!

🖥 Хочу освоить Bubble: codebreakers.tech/bubble

BY Code Breakers | No-code solutions